<template>
  <!-- <Person :personList="personList"/> -->
  <Person v-if="isShow" />
  <button @click="changeShow">点我隐藏</button>
</template>


<script lang="ts">
export default {
  name: 'App',
}


</script>

<!-- 父组件 -->
<script lang="ts" setup>
import { reactive, ref, onMounted } from 'vue';
import Person from './components/Person.vue'


let isShow = ref(true);

function changeShow() {
  isShow.value = !isShow.value
}


onMounted(() => {
  console.log('父----挂载完毕')
})


</script>

<style>
.app {
  background-color: #ddd;
  box-shadow: 0 0 10px;
  border-radius: 10px;
  padding: 20px;
}

button {
  padding: 10px;
  margin: 0 5px;
}
</style>